import React, {
  FC,
  useRef, useState
} from 'react'
import {CSSTransition} from 'react-transition-group'
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import routes from '../../routes';
import Menu from "../../components/Menu/Menu";
import './App.scss'
import Logo from "@/components/Logo";
import TopNav from "@/components/TopNav/TopNav";

const routePages: any[] = []

routes.forEach((route, index1) => {
  if (route.routes) {
    route.routes.forEach((item, index2) => {
      console.log(item)
      routePages.push(
        <Route exact strict {...item} key={`${index1}${index2}`}/>
      )
    });
  } else {
    console.log(route)
    routePages.push(
      <Route exact strict {...route} key={`${index1}`}/>
    )
  }
})


const App: FC = (props) => {
  const [showMenu, setShowMenu] = useState(false)
  const setShow = () => {
    setShowMenu(!showMenu)
  }
  let paddingLeft = '0rem'
  // if (showMenu) paddingLeft = '15rem'
  // else paddingLeft = '0rem'
  return (
    <main className={'app'}>
      <div>
        <TopNav setShow={setShow}/>
      </div>
      <Router>
        <CSSTransition
          in={showMenu}//为true进入显示组件（主要通过in属性来控制组件状态）
          classNames="card"//设置类名的前缀
          timeout={1000}//设置过渡动画事件
          unmountOnExit={true}//消失动画结束后 + display:none
        >
          <Menu/>
        </CSSTransition>
        <main style={{
          overflow: 'auto',
          height: '100%',
          paddingLeft
        }} onClick={() => setShowMenu(false)}>
          <Switch>
            {routePages}
          </Switch>
        </main>
      </Router>
    </main>
  )
}

export default App
